<template>
  <div class="main">
    <h2 class="title" v-if="!title">
      <div>
        第二步：分配账号 ({{
          gameAccountVo.gameId
            ? `当前匹配: ${gameAccountVo.nickname}/${gameAccountVo.accountServerName}`
            : "当前未匹配"
        }})
      </div>
      <div>
        <el-dropdown @command="selectPlatformCallBack">
          <span class="el-dropdown-link">
            {{ platform.label
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in platforms"
              :key="item.value"
              :command="item"
              >{{ item.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        &nbsp;&nbsp;
        <el-dropdown @command="selectGameCallBack">
          <span class="el-dropdown-link">
            {{ selectGame.label
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in games"
              :key="item.value"
              :command="item"
              >{{ item.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </h2>
    <h2 class="title" v-else>
      {{ title }}
    </h2>
    <div class="order">
      <div class="preview" v-if="iframe">
        <iframe
          ref="iframe"
          width="375"
          height="700"
          :src="selectGame.url"
          frameborder="0"
        ></iframe>
      </div>
      <div class="submit" v-if="iframe">
        <div>
          <el-tooltip
            content="确认分配会将渠道订单关联成趣游戏订单"
            placement="top"
          >
            <el-button
              type="primary"
              @click="onSubmit"
              :disabled="!gameAccountVo.gameId"
              >确认分配</el-button
            >
          </el-tooltip>
          <p>确认分配会将渠道订单关联成趣游戏订单</p>
          <p>ps:请先进入账号详情页再进行分配</p>
        </div>
      </div>
      <div class="account" v-if="account.secret">
        <div><span>【登号器下载】：</span> https://d.game.com/download.html <i class="el-icon-document-copy
" @click="copyToClip('https://d.game.com/download.html')"></i></div>
        <div><span>【匹配账号】：</span> {{ account.accountName }}</div>
        <div><span>【区服】：</span>{{ account.serverName }}</div>
        <div><span>【角色名】：</span>{{ account.roleName }}</div>
        <div><span>【订单密码】：</span>{{ account.secret }} <i class="el-icon-document-copy
" @click="copyToClip(account.secret)"></i></div>
        <div><span>【租赁时长】：</span>{{ account.rentTime }}</div>
        <div>
          <span>【快捷输出】：</span>
          <div class="output" style="" v-html="account.orderDesc"></div>
        </div>
        <div>
          <span></span>
          <div>
            <el-button
              type="danger"
              @click="cancelOrder"
              v-if="[3, 5].indexOf(orderStatus) === -1"
              >重新分配账号</el-button
            >
            <el-button type="primary" @click="copyToClip(account.orderDesc)"
              >拷贝</el-button
            >
          </div>
        </div>
        <!-- <iframe width="375" height="700" :src="iframUrl"></iframe> -->
      </div>
      <div v-else class="tips">
        <p>请先选择账号</p>
      </div>
    </div>
  </div>
</template>
<script>
let domain = 'https://dev-game.duodian.cn/'
if (location.host === 'dev-work.duodian.cn') {
  domain = 'https://dev-game.duodian.cn/'
} else if (location.host === 'work.duodian.cn') {
  domain = 'https://api-game.duodian.cn/'
} else {
  domain = 'http://192.168.50.114:1234/'
}
const gameUrls = {
  1104466820: `${domain}web/quGame/wzryRents/index?gameId=1104466820`,
  1106467070: `${domain}web/quGame/hpjyRent/index?gameId=1106467070`
}
export default {
  name: 'AccountInfo',
  props: {
    onSubmit: Function,
    gameAccountVo: Object,
    account: Object,
    info: Object,
    title: String,
    iframe: Boolean,
    orderStatus: Number,
    cancelOrder: Function
  },
  data () {
    return {
      channels: [
        {
          name: '拼多多',
          id: 0
        }
      ],
      selectGame: {
        label: '王者荣耀',
        value: 1104466820,
        url: `${domain}web/quGame/wzryRents/index?gameId=1104466820&source=admin&areaType=1`
      },
      games: [
        {
          label: '王者荣耀',
          value: 1104466820,
          url: `${domain}web/quGame/wzryRents/index?gameId=1104466820`
        },
        {
          label: '和平精英',
          value: 1106467070,
          url: `${domain}web/quGame/hpjyRent/index?gameId=1106467070`
        }
      ],
      platform: {
        label: 'Android',
        value: 1
      },
      platforms: [
        {
          label: 'Android',
          value: 1
        },
        {
          label: 'iOS',
          value: 2
        }
      ],
      query: {
        keyWord: null,
        status: null,
        gameId: null,
        time: null,
        channel: null,
        operator: null,
        pageNum: 1,
        pageSize: 30
      }
    }
  },
  mounted () {},
  methods: {
    selectGameCallBack (item) {
      item.url = `${gameUrls[item.value]}&source=admin&areaType=${
        this.platform.value
      }`
      this.selectGame = item
    },
    selectPlatformCallBack (item) {
      this.platform = item
      this.selectGame.url = `${
        gameUrls[this.selectGame.value]
      }&source=admin&areaType=${item.value}`
    },
    copyToClip (content, message) {
      const aux = document.createElement('textarea')
      aux.innerHTML = `${content}`
      document.body.appendChild(aux)
      aux.select()
      document.execCommand('copy')
      document.body.removeChild(aux)
      this.$message.success('复制成功')
    }
  }
}
</script>
<style lang="scss">
.loading-class {
  font-size: 50px;
  .el-loading-text, .el-icon-loading{
    color: #039624 !important;
  }

}
</style>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown {
  margin-left: 10px;
}
.main {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 15px;
  .title {
    font-size: 23px;
    font-weight: 400;
    line-height: 46px;
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .order {
    display: flex;
    > div {
      flex: 1;
    }
    .preview {
      flex: 0 0 375px;
      border-radius: 20px;
      box-shadow: -1px 4px 13px #6f6f6f;
      overflow: hidden;
    }
    .submit {
      display: flex;
      flex: 0 0 240px;
      font-size: 12px;
      text-align: center;
      color: #333;
      justify-content: center;
      align-items: center;
      button {
        margin-bottom: 10px;
      }
    }
    .account {
      color: #606266;
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        span {
          flex: 0 0 150px;
        }
        .el-icon-document-copy{
          margin-left: 5px;
          color: #29b4f9;
        }
        .output {
          white-space: pre-wrap;
          border: 1px solid #f5f4ce;
          background: #f5f4ce;
          border-radius: 6px;
          padding: 10px;
          width: 500px;
        }
      }
    }
    .tips {
      color: #333;
    }
  }
}
</style>
